<template>
	<view class="input">
		<view class="i-wrap">
			<text class="w-icon iconfont">&#xe652;</text>
			<input class="w-input" type="text" :placeholder="placeholder"
				v-model="query"/>
			<text class="w-icon iconfont" @click="clearQuery">&#xe61a;</text>
		</view>
	</view>
</template>

<script>
	import { debounce } from '../../common/js/util.js'
	export default {
		props: {
			placeholder: {
				type: String,
				default: '小龙虾69元6斤'
			}
		},
		data() {
			return {
				query: ''
			}
		},
		methods: {
			clearQuery() {
				this.query = ''
			},
			setQuery(query) {
				this.query = query
			},
			// 文本框失焦，移动端去掉小键盘
			blur() {
				this.$refs.query.blur()
			}
		},
		created() {
			this.$watch(
				'query',
				debounce(newQuery => {
					this.$emit('query',newQuery)
				},200)
			)
		}
	}
</script>

<style lang="less" scoped>
.input {
	display: flex;
	align-items: center;
	height: 77rpx;
	padding: 11rpx 0;
	.i-wrap {
		flex: 7;
		height: 100%;
		display: flex;
		background: #f8f8f8;
		align-items: center;
		border-radius: 15rpx;
		.w-icon {
			font-size: 40rpx;
			color: #666666;
			padding: 0 10rpx;
		}
		.w-input {
			flex: 8;
			display: flex;
			height: 100%;
			color: #666;
			letter-spacing: 1px;
		}
		
	}
	.s-btn {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15rpx;
	}
}
</style>
